<template>
    <!-- <div class="app-container">
        <div class="customContainer">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="请输入供货商名称" @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                                <div class="el-button--small el-button el-button el-button--primary" @click="searchClick">
              <span>搜索</span> 
            </div>
                </el-form-item>
            </el-form>
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='供货商名称' prop="name"></el-table-column>
                <el-table-column align="center" label="所在地区">
                    <template slot-scope="scope">
                        {{scope.row.prov_name}} / {{scope.row.city_name}} / {{scope.row.dist_name}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="详细地址" prop="address"></el-table-column>
                <el-table-column align="center" label='联系人'>
                    <template slot-scope="scope">
                        {{scope.row.linkman == 0 ?'-':scope.row.linkman}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='联系方式'>
                    <template slot-scope="scope">
                        {{scope.row.phone == 0 ?'-':scope.row.phone}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='电子邮件'>
                    <template slot-scope="scope">
                        {{scope.row.email == 0 ?'-':scope.row.email}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button disabled type="primary" icon="el-icon-edit" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom_box">
            <el-pagination class="pull-left" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
            <el-button class="pull-right" type="primary" size="small" disabled>新增</el-button>
        </div>
    </div> -->
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <dj-region @provVal="provVal" @cityVal="cityVal" @areaVal="areaVal" ref="region"></dj-region>
        </el-form-item>
        <el-form-item>
          <el-select filterable style="width:80px" v-model="formInline.status">
            <el-option v-for="item in status_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-input placeholder="请输入供应商名称" v-model="formInline.supplier_name"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-autocomplete v-model="formInline.name" :fetch-suggestions="querySearch" placeholder="请输入供应商名称" :trigger-on-focus="false" valueKey="name" size="small"></el-autocomplete>
        </el-form-item>
        <el-form-item >
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编号" prop="serial_number"></el-table-column>
        <el-table-column align="center" label='供应商名称' prop="name"></el-table-column>
        <el-table-column align="center" label="地区" width="150">
          <template slot-scope="scope">{{scope.row.prov_name}}/{{scope.row.city_name}}/{{scope.row.dist_name}}</template>
        </el-table-column>
        <el-table-column align="center" label='默认联系人' prop="linkman" width="100"></el-table-column>
        <el-table-column align="center" label='联系人电话' prop="phone"></el-table-column>
        <el-table-column align="center" label='对接人' prop="butt_man" width="100"></el-table-column>
        <el-table-column align="center" label="状态" width="100" prop="status"></el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="addClick(3,scope.row.id,scope.$index)" type="primary" plain size="mini">详情</el-button>
            <!-- <el-button type="primary" @click="addClick(2,scope.row.id,scope.$index)" plain size="mini">修改</el-button> -->
            <!-- <el-button v-show="scope.row.s_status==0" size="mini" plain @click="statusClick(scope.row.id,scope.$index,1)">停用</el-button> -->
            <!-- <el-button v-show="scope.row.s_status==1" type="success" size="mini" @click="statusClick(scope.row.id,scope.$index,0)">启用</el-button> -->
            <!-- <el-button v-show="scope.row.s_status==1" type="danger" size="mini" @click="delClick(scope.row.id,scope.$index)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="supplierDialog"  width="1000px" @close="callOf">
        <div v-if="dialogType==1" class="steps">
          <div class="step_item" :class="{active:tab>=1}">1. 基础信息</div>
          <div class="step_line" :class="{active:tab>=2}"></div>
          <div class="step_item" :class="{active:tab>=2}">2. 联系信息</div>
          <div class="step_line" :class="{active:tab>=3}"></div>
          <div class="step_item" :class="{active:tab>=3}">3. 财务信息</div>
        </div>
        <div v-else class="tabs">
          <div class="tab_item" @click="switchover(1,1)" :class="{show:tab==1}">基础信息</div>
          <div class="tab_item" @click="switchover(1,2)" :class="{show:tab==2}">联系信息</div>
          <div class="tab_item" @click="switchover(1,3)" :class="{show:tab==3}">财务信息</div>
        </div>
        <div>
          <!-- 基础信息 -->
          <div v-show="tab==1">
            <div class="tab_title">供应商信息</div>
            <el-form :model="supplier_info" ref="supplier_info" :rules="rules" :inline="true" style="width:700px;margin:0 auto;" label-position="right" label-width="70px">
              <el-form-item label="名称" prop="name">
                <el-input :disabled="isLook" style="width:190px" size="small" :maxlength="64" v-model="supplier_info.name" placeholder="请输入供应商名称"></el-input>
              </el-form-item>
              <el-form-item label="编号" prop="serial_number" style="margin-left: 134px;">
                <el-input :disabled="isLook" style="width:190px" :maxlength="32" size="small" placeholder="请输入供应商编号" v-model="supplier_info.serial_number"></el-input>
              </el-form-item>
              <el-form-item label="地区" required>
                <el-form-item prop="prov" >
                  <el-select :disabled="isLook" placeholder="请选择省" v-model="supplier_prov" @change="provChange" size="small" style="width: 190px">
                    <el-option v-for="item in proData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="city" >
                  <el-select :disabled="isLook" placeholder="请选择市" v-model="supplier_city" @change="cityChange" size="small" style="width: 190px">
                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="dist" >
                  <el-select :disabled="isLook" placeholder="请选择区" v-model="supplier_dist" size="small" style="width: 190px">
                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
              <el-form-item label="详细地址" prop="address">
                <el-input :disabled="isLook" type="textarea" style="width:598px" :maxlength="64" size="small" :rows="3" v-model="supplier_info.address"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 联系信息 -->
          <div v-show="tab==2">
            <div class="tab_title">
              <span>供应商联系人</span> 
              <el-button v-if="!isLook" class="title_btn" type="primary"  @click="addSupplier">添加联系人</el-button>
            </div>
            <el-table ref="supplierList" highlight-current-row :data="supplierList" border size="small">
              <el-table-column align="center" label='序号' width="50">
                <template slot-scope="scope">
                  <span class="indexColor">{{scope.$index+1}}</span>
                </template>
              </el-table-column> 
              <el-table-column align="center" label="姓名" prop="name" width="105">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.name}}</span>
                  <el-input v-else size="small" v-model="scope.row.name"></el-input>
                </template>                
              </el-table-column>
              <el-table-column align="center" label='电话' prop="phone" width="140">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.phone}}</span>
                  <el-input v-else size="small" v-model="scope.row.phone"></el-input>
                </template>  
              </el-table-column>
              <el-table-column align="center" label='QQ' prop="QQ" width="140">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.QQ}}</span>
                  <el-input v-else size="small" v-model="scope.row.QQ"></el-input>
                </template>      
              </el-table-column>
              <el-table-column align="center" label="微信" prop="wexin">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.wexin}}</span>
                  <el-input v-else size="small" v-model="scope.row.wexin"></el-input>
                </template> 
              </el-table-column>
              <el-table-column align="center" label="邮箱" prop="email">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.email}}</span>
                  <el-input v-else size="small" v-model="scope.row.email"></el-input>
                </template> 
              </el-table-column>
              <!-- 列表的操作按钮 -->
              <el-table-column v-if="!isLook" align="center" label="操作" width="197">
                <template slot-scope="scope">
                  <span style="display:inline-block;width:50px" v-show="scope.row.linkman_defult==1">当前默认</span>
                  <el-button v-show="scope.row.linkman_defult==0" @click="defaultSupplierClick(scope.$index)" type="text" size="mini">设为默认</el-button>
                  <el-button type="text" style="color: #f56c6c;" size="mini" @click="delSupplierClick(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="height:30px;">
              <span v-show="isSupplier5==1" style="color:#f56c6c;font-size:12px;">最多可添加5名联系人</span>            
            </div>
            <div class="tab_title">总部对接人</div>
            <el-select v-if="!isLook" style="width:130px;margin-bottom:5px;" size="small" filterable placeholder="请选择对接人" v-model="contact_info.butt_man_id" @change="setButt" :disabled="isSetButt">
              <el-option v-for="item in buttList" :key="item.id" :label="item.nick" :value="item.id"></el-option>
            </el-select>
            <el-table ref="buttInfoList" highlight-current-row :data="buttInfoList" border size="small">
              <el-table-column align="center" label='序号' width="80">
                <template slot-scope="scope">
                  <span class="indexColor">{{scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label='姓名' prop="nick" width="120"></el-table-column>
              <el-table-column align="center" label='性别' prop="s" width="120"></el-table-column>
              <el-table-column align="center" label='电话' prop="phone"></el-table-column>
              <!-- 列表的操作按钮 -->
              <el-table-column v-if="!isLook" align="center" label="操作" width="120">
                <template slot-scope="scope">
                  <!-- <el-button type="danger" size="mini" @click="delButtClick">删除</el-button> -->
                  <el-button type="text" style="color: #f56c6c;" size="mini" @click="delButtClick">删除</el-button>
                </template>
              </el-table-column>
            </el-table>                        
          </div>
          <!-- 财务信息 -->
          <div v-show="tab==3">
            <div class="tab_title">
              <span>财务信息</span>
              <el-button v-if="!isLook" class="title_btn" style="margin-bottom:5px" type="primary" @click="addFinance">添加账户</el-button> 
            </div>
            <el-table ref="financeList" highlight-current-row :data="financeList" border size="small">
              <el-table-column align="center" label='序号' width="50">
                <template slot-scope="scope">
                  <span class="indexColor">{{scope.$index+1}}</span>
                </template>
              </el-table-column> 
              <el-table-column :maxlength="64" align="center" label="户号" prop="bank_num">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.bank_num}}</span>
                  <el-input v-else size="small" v-model="scope.row.bank_num"></el-input>
                </template>                
              </el-table-column>
              <el-table-column :maxlength="16" align="center" label='户名' prop="user_name">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.user_name}}</span>
                  <el-input v-else size="small" v-model="scope.row.user_name"></el-input>
                </template>  
              </el-table-column>
              <el-table-column align="center" label='银行' prop="bank_name" width="140">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.bank_name}}</span>
                  <el-input v-else :maxlength="16" size="small" v-model="scope.row.bank_name"></el-input>
                </template>      
              </el-table-column>
              <el-table-column :maxlength="64" align="center" label="开户行" prop="open_bank">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.open_bank}}</span>
                  <el-input v-else size="small" v-model="scope.row.open_bank"></el-input>
                </template> 
              </el-table-column>
              <el-table-column :maxlength="32" align="center" label="备注" prop="remark">
                <template slot-scope="scope">
                  <span v-if="isLook">{{scope.row.remark}}</span>
                  <el-input v-else size="small" v-model="scope.row.remark"></el-input>
                </template> 
              </el-table-column>
              <!-- 列表的操作按钮 -->
              <el-table-column v-if="!isLook" align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <!-- <el-button type="danger" size="mini" @click="delFinance(scope.$index)">删除</el-button> -->
                  <el-button type="text" style="color: #f56c6c;" size="mini" @click="delFinance(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>            
          </div>
        </div>
        <div v-show="dialogType==1" slot="footer" class="dialog-footer">
            <el-button v-show="tab==2" @click="switchover(3)" type="primary" size="small">跳过</el-button>
            <el-button v-show="tab>1" @click="switchover(2)" type="primary" size="small">上一步</el-button>
            <el-button v-show="tab<3" @click="switchover(1)" type="primary" size="small">下一步</el-button>
            <el-button v-show="tab==3" @click="switchover(1)" type="primary" size="small">提交</el-button>
            <el-button v-show="dialogType==2" @click="switchover(4)" type="primary" size="small">保存</el-button>
            <!-- <el-button >取 消</el-button> -->
        </div>
        <div v-show="dialogType==2" slot="footer" class="dialog-footer">
            <el-button  @click="switchover(4)" type="primary" size="small">保存</el-button>
            <!-- <el-button >取 消</el-button> -->
        </div>
      </el-dialog>  
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <!-- <el-button class="pull-right" type="primary" size="small" @click="addClick(1)">新增供应商</el-button> -->
    </div>
  </div>
</template>

<script>
    // import {
    //     getList,
    //     getPage,
    // } from "@/api/information/supplier";
    // export default {
    //     data() {
    //         return {
    //             machineInfo: '',
    //             list: null,
    //             listLoading: false,
    //             currentPage: 1,
    //             totalDataNumber: 0,
    //             formInline: {
    //                 name: ''
    //             },
    //         };
    //     },
    //     created() {
    //         this.searchClick();
    //     },
    //     methods: {
    //         // 搜索
    //         searchClick() {
    //             this.fetchData();
    //         },
    //         // 列表获取
    //         fetchData() {
    //             this.listLoading = true;
    //             this.currentPage = 1;
    //             getPage(this.formInline).then(response => {
    //                 this.totalDataNumber = response.page * 20;
    //                 getList(this.formInline).then(response => {
    //                     this.list = response;
    //                     this.listLoading = false;
    //                 })
    //             }).catch(res=>{
    //                 this.listLoading=false;
    //             })
    //         },
    //         // 分页
    //         handleSizeChange(val) {
    //             console.log(`每页 ${val} 条`);
    //         },
    //         handleCurrentChange(val) {
    //             this.listLoading = true;
    //             getList(this.formInline, val).then(response => {
    //                 this.list = response;
    //                 this.listLoading = false;
    //             });
    //         },
    //     }
    // };
  import { dotNum, onlyNum, letterNumLine } from '@/utils/validate'
  import { get_district } from "@/api/region/region";
  import {
    getList,
    getPage,
    changeStatus,
    del,
    getSupplierInfo,
    getDocking,
    setSupplier,
    getSupplier,
  } from "@/api/giftPurchase/supplierinfor";
  export default {
    data() {
      const vNum = (rule, value, callback) => {
        if (this.dialogType!=3&&!value) {
          callback(new Error('请输入供应商编号'))
        }else if(this.dialogType!=3&&!letterNumLine(value)){
          callback(new Error('编号为字母、数字、下划线或-'))
        } else {
          callback()
        }
      }
      const vProv = (rule, value, callback) => {
        if (this.dialogType!=3&&!this.supplier_prov) {
          callback(new Error('请选择省'))
        } else {
          callback()
        }
      }
      const vCity = (rule, value, callback) => {
        if (this.dialogType!=3&&this.cityData.length>0&&!this.supplier_city) {
          callback(new Error('请选择市'))
        } else {
          callback()
        }
      }
      const vDist = (rule, value, callback) => {
        if (this.dialogType!=3&&this.areaData.length>0&&!this.supplier_dist) {
          callback(new Error('请选择区'))
        } else {
          callback()
        }
      }
      return {
        status_list:[{id:"0",name:"在用"},{id:"1",name:"停用"}],
        supplier_list:[], //供应商名称搜索
        supplierList:[], //供应商联系人
        buttList:[], //对接人
        oldButtList:[], //对接人(提交数据)
        buttInfoList:[], //对接人详细信息
        financeList:[], //财务信息列表
        oldData:{}, //修改之前的信息
        supplier_info:{
          name:"",
          serial_number:"",
          prov_id: "",
          city_id: "",
          dist_id: "0",  
          address:""        
        },
        contact_info:{
          butt_man_id:"", //对接人
          butt_man_info:[], //对接人信息
          all_linkman:[], //联系人
        },
        supplier_prov:"",
        supplier_city:"",
        supplier_dist:"",
        formName:"supplier_info",
        dialogType:1, //1：新增 2：修改 3：详情 
        isLook:false, //是否仅查看
        tab:1, //控制弹窗tab切换
        isSupplier5:0, //联系人信息是否有5条
        page: 1,
        searchValue: "",
        list: null,
        listLoading: false,
        supplierDialog: false,
        dialogTitle: '',
        currentPage: 1,
        totalDataNumber: 0,
        formInline: {
          status: "0",
          name: "",
          prov_id: "",
          city_id: "",
          dist_id: "",
        },
        rules: {
          name: [
            { required: true, message: '请输入供应商名称', trigger: 'blur' }
          ],
          serial_number: [
            { required: true, validator: vNum, trigger: 'blur' }
          ],
          prov: [
            { required: true, validator: vProv, trigger: 'change' }
          ],
          city: [
            { required: true, validator: vCity, trigger: 'change' }
          ],
          dist: [
            { required: true, validator: vDist, trigger: 'change' }
          ],
        },
        proData: [{ id: '1', name: '北京' }, { id: '2', name: '天津' }, { id: '3', name: '上海' }, { id: '4', name: '重庆' }, { id: '5', name: '河北' }, { id: '6', name: '山西' }, { id: '7', name: '内蒙古' }, { id: '8', name: '辽宁' }, { id: '9', name: '吉林' }, { id: '10', name: '黑龙江' }, { id: '11', name: '江苏' }, { id: '12', name: '浙江' }, { id: '13', name: '安徽' }, { id: '14', name: '福建' }, { id: '15', name: '江西' }, { id: '16', name: '山东' }, { id: '17', name: '河南' }, { id: '18', name: '湖北' }, { id: '19', name: '湖南' }, { id: '20', name: '广东' }, { id: '21', name: '广西' }, { id: '22', name: '海南' }, { id: '23', name: '四川' }, { id: '24', name: '贵州' }, { id: '25', name: '云南' }, { id: '26', name: '西藏' }, { id: '27', name: '陕西' }, { id: '28', name: '甘肃' }, { id: '29', name: '青海' }, { id: '30', name: '宁夏' }, { id: '31', name: '新疆' }, { id: '32', name: '台湾' }, { id: '33', name: '香港' }, { id: '34', name: '澳门' }, { id: '35', name: '海外' }],
        cityData: [],
        areaData: []
      };
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
        if (!vm.list) {
          vm.getSupplierName();
          vm.fetchData();
        }
      })
    },
    created(){

    },
    methods: {
      querySearch(queryString, cb) {
        var supplier_list = this.supplier_list;
        var results = queryString ? supplier_list.filter(this.createFilter(queryString)) : supplier_list;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
            return (restaurant.name.indexOf(queryString) >= 0);
        };
      },
      // 编辑省市区
      editRegion() {

      },
      // 子组件传过来的省
      provVal(val) {
        this.formInline.prov_id = val
      },
      // 子组件传过来的市
      cityVal(val) {
        this.formInline.city_id = val
      },
      // 子组件传过来的区
      areaVal(val) {
        this.formInline.dist_id = val
      },

      //弹窗
      //选择省
      provChange(id){
        this.cityData = [];
        this.areaData = [];
        this.supplier_info.city_id="";
        this.supplier_city="";
        this.supplier_info.dist_id="0";
        this.supplier_dist="0";
        this.supplier_dist="";
        if (this.supplier_prov == "") {
          return;
        }
        get_district({ id: this.supplier_prov }).then(res => {
          this.cityData = res;
        });
        this.cityChange()
      },
      //选择市
      cityChange(id){
        this.areaData = [];
        this.supplier_info.dist_id="0";
        this.supplier_dist="";
        if (this.supplier_city == "") {
          return;
        }
        get_district({ id: this.supplier_city }).then(res => {
          this.areaData = res;
        });
      },
      //添加联系人
      addSupplier(){
        if(this.supplierList.length>=5){
          this.isSupplier5=1;
          return;
        }
        let obj={
          name:"",
          phone:"",
          QQ:"",
          wexin:"",
          email:"",
          linkman_defult:0
        };
        if(this.supplierList.length<=0){
          obj.linkman_defult=1
        }
        this.supplierList.push(obj)
      },
      //设置默认联系人
      defaultSupplierClick(i){
        this.supplierList.forEach(val=>val.linkman_defult=0);
        this.supplierList[i].linkman_defult=1;        
      },
      //删除联系人
      delSupplierClick(i){
        let supler=this.supplierList.splice(i,1);
        if(this.supplierList.length>0&&supler[0].linkman_defult==1){
          this.supplierList[0].linkman_defult=1;
        }
        if(this.supplierList.length<5){
          this.isSupplier5=0
        }
      },
      //设置对接人
      setButt(id){
        this.buttInfoList.push(this.buttList.filter(val=>val.id==id)[0]);
        this.contact_info.butt_man_info.push(this.oldButtList.filter(val=>val.id==id)[0]);
      },
      //删除对接人
      delButtClick(){
        this.buttInfoList=[];
        this.contact_info.butt_man_info=[];
        this.contact_info.butt_man_id="";
      },
      //添加账户
      addFinance(){
        let obj={
          bank_num:"",
          user_name:"",
          bank_name:"",
          open_bank:"",
          remark:""
        };
        this.financeList.push(obj)
      },
      //删除对接人
      delFinance(i){
        this.financeList.splice(i,1)
      },
      searchClick() {
        
        this.fetchData();
      },
      // getFristBrand() {
      //   fristBrandList().then(response => {
      //     // console.log(response.slice(1))
      //     this.fristBrand = response
      //   });
      // },
      // 新增/修改/详情
      addClick(type,id,index) {
        getDocking({}).then(res=>{
          this.dialogType=type;
          this.oldButtList=JSON.parse(JSON.stringify(res));
          res.forEach(val=>{
            val.s=val.sex==0?"未设置":val.sex==1?"男":val.sex==2?"女":"保密";
          })
          this.buttList=res;
          if(type==1){
            this.dialogTitle="新增供应商"
          }else if(type==2){
            this.dialogTitle="修改供应商"
            getSupplierInfo({id}).then(res=>{
              res.dist_id=res.dist_id==0?"":res.dist_id;
              this.oldData=JSON.parse(JSON.stringify(res));
              this.supplier_info.name=res.name;
              this.supplier_info.serial_number=res.serial_number;
              this.supplier_info.address=res.address;
              this.contact_info.butt_man_id=res.butt_man_id==0?"":res.butt_man_id;
              this.supplierList=res.all_linkman?JSON.parse(res.all_linkman):[];
              this.financeList=res.bank_info?JSON.parse(res.bank_info):[];
              let buttInfoList=res.butt_man_info?JSON.parse(res.butt_man_info):[];
              this.contact_info.butt_man_info=res.butt_man_info?JSON.parse(res.butt_man_info):[];
              buttInfoList.length>0&&buttInfoList.forEach(val=>{
                val.s=val.sex==0?"未设置":val.sex==1?"男":val.sex==2?"女":"保密";
              })
              this.buttInfoList=buttInfoList;
              this.supplier_prov=res.prov_id;
              get_district({ id: this.supplier_prov }).then(cityRes => {
                this.cityData = cityRes;
                this.supplier_city=res.city_id;
                get_district({ id: this.supplier_city }).then(distRes => {
                  this.areaData = distRes;
                  this.supplier_dist=res.dist_id;
                });
              });
            })
          }else{
            this.dialogTitle="供应商详情";
            this.isLook=true;
            getSupplierInfo({id}).then(res=>{
              // console.log(res)
              this.supplier_info.name=res.name;
              this.supplier_info.serial_number=res.serial_number;
              this.supplier_prov=res.prov_id;
              this.supplier_city=res.city_name;
              this.supplier_dist=res.dist_name;
              this.supplier_info.address=res.address;
              this.supplierList=res.all_linkman?JSON.parse(res.all_linkman):[];
              this.financeList=res.bank_info?JSON.parse(res.bank_info):[];
              this.oldButtList=res.butt_man_info?JSON.parse(res.butt_man_info):[];
              let buttInfoList=res.butt_man_info?JSON.parse(res.butt_man_info):[];
              buttInfoList.length>0&&buttInfoList.forEach(val=>{
                val.s=val.sex==0?"未设置":val.sex==1?"男":val.sex==2?"女":"保密";
              })
              this.buttInfoList=buttInfoList;
            })
          }
          this.supplierDialog=true;
        })
      },
      switchover(i,tab){
        setTimeout(()=>{
          this.$refs["supplierList"].doLayout();
          this.$refs["buttInfoList"].doLayout();
          this.$refs["financeList"].doLayout();
        },100)
        if(i==1){
          if(this.tab==1){
            if(this.isLook){
              this.tab=tab;
            }else{
              this.$refs[this.formName].validate((valid)=>{
                if(valid){
                  // this.supplier_info.prov_id=this.supplier_prov;
                  // this.supplier_info.city_id=this.supplier_city;
                  // this.supplier_info.dist_id=this.supplier_dist;
                  // console.log(this.supplier_info)
                  this.tab=this.dialogType==2?tab:this.tab+1;
                }
              })
            }
          }else if(this.tab==2){
            if(this.isLook){
              this.tab=tab;
              return ;
            }
            let isSubmit=true;
            if(this.supplierList.length<=0){
              if(this.dialogType==2){
                this.tab=tab;
                return ;
              }else{
                this.$message.error("请填写联系人信息");
                return ;              
              }
            }
            this.supplierList.forEach(val=>{
              val.phone=val.phone.replace(/，/g,",");
              if(val.name==""){
                this.$message.error("联系人姓名不能为空");
                isSubmit=false;
                return ;
              }
              if(val.phone==""){
                this.$message.error("联系人电话不能为空");
                isSubmit=false;
                return ;
              }
              if(val.phone&&!dotNum(val.phone)){
                this.$message.error("电话只能为数字，多个号码用逗号隔开");
                isSubmit=false;
                return ;
              }
            })
            if(isSubmit){
              // this.contact_info.all_linkman=this.supplierList;
              // console.log(this.contact_info)
              this.tab=this.dialogType==2?tab:this.tab+1;
            }
          }else if(this.tab==3){
            if(this.dialogType>=2){
              this.tab=tab;
              return ;
            }
            this.saveData();
          }
        }else if(i==2){
          this.tab--;        
        }else if(i==3){
          this.supplierList=[];
          this.contact_info.butt_man_id="";
          this.contact_info.all_linkman=[];
          this.buttInfoList=[];
          this.tab++;
        }else if(i==4){
          if(this.tab==1){
            this.$refs[this.formName].validate((valid)=>{
              if(valid){
                this.saveData();
              }
            })
          }else if(this.tab==2){
            let isSubmit=true;
            this.supplierList.forEach(val=>{
              val.phone=val.phone.replace(/，/g,",");
              if(val.name==""){
                this.$message.error("联系人姓名不能为空");
                isSubmit=false;
                return ;
              }
              if(val.phone==""){
                this.$message.error("联系人电话不能为空");
                isSubmit=false;
                return ;
              }
              if(val.phone&&!dotNum(val.phone)){
                this.$message.error("电话只能为数字，多个号码用逗号隔开");
                isSubmit=false;
                return ;
              }
            })
            if(isSubmit){
              this.saveData()
            }            
          }else{
            this.saveData()
          }          
        }
      },
      // 停用，启用
      statusClick(id, index, status) {
        let text = status == '0' ? '确认启用？将可采购该供应商的货物。' : '确认停用？将无法采购该供应商的货物。'
        this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          changeStatus({id,status}).then(res=>{
            this.$message({ type: res.code == 1 ? 'success' : 'error', message: res.message });
            if(res.code==1){
              this.list.splice(index,1)
            }
          })
        })
      },
      //删除供应商
      delClick(id, index) {
        this.$confirm('此操作删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del({id}).then(res=>{
            this.$message({ type: res.code == 1 ? 'success' : 'error', message: res.message });
            if(res.code==1){
              this.list.splice(index,1);
            }
          })
        })
      },
      //保存
      saveData(){
        this.supplier_info.prov_id=this.supplier_prov;
        this.supplier_info.city_id=this.supplier_city;
        this.supplier_info.dist_id=this.supplier_dist;
        this.contact_info.all_linkman=this.supplierList;
        let text="未完善，继续保存吗?";
        let isComplete=true;
        let finaComplete=true;
        if(this.financeList.length<=0){
          finaComplete=false;
        }else{
          this.financeList.forEach(val=>{
            if(!val.bank_num&&!val.user_name&&!val.bank_name&&!val.open_bank&&!val.remark){
              finaComplete=false;
              return ;
            }else if(val.bank_num&&!onlyNum(val.bank_num)){
              this.$message.error("户号只能为数字");
              return ;                
            }
          })
        }
        if(this.contact_info.all_linkman.length<=0||this.contact_info.butt_man_id==""){
          isComplete=false;
          if(!finaComplete){
            text="联系信息、财务信息"+text;
          }else{
            text="联系信息"+text;
          }
        }else if(!finaComplete){
          isComplete=false;
          text="财务信息"+text;
        }
        if(!isComplete){
          this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            this.getData();
          })            
        }else{
          this.getData();
        }
      },
      //数据整合
      getData(){
        Object.assign(this.supplier_info,this.contact_info)
        let data=this.supplier_info;
        data.bank_info=this.financeList.filter(val=>val.bank_num||val.user_name||val.bank_name||val.open_bank||val.remark);
        data.prov_name=data.prov_id?this.proData.filter(val=>val.id==data.prov_id)[0].name:"";
        data.city_name=data.city_id?this.cityData.filter(val=>val.id==data.city_id)[0].name:"";
        data.dist_name=data.dist_id?this.areaData.filter(val=>val.id==data.dist_id)[0].name:"";
        if(this.dialogType==2){
          for(let key in data){
            if(typeof data[key] === "object" || typeof data[key] === "function"){
              let obj=JSON.stringify(data[key])
              if(obj==this.oldData[key]){
                delete data[key]
              }
            }else{
              if(data[key]==this.oldData[key]){
                delete data[key]
              }                
            }
          }
          if(JSON.stringify(data)=="{}"){
            this.supplierDialog=false;
            return;
          }
          data.id=this.oldData.id;
        }
        setSupplier(data).then(res=>{
          if(res.code==1){
            this.$message.success(res.message);
            this.handleCurrentChange(this.page);
            this.supplierDialog=false;
          }
        })
      },
      //关闭弹框重置
      callOf() {
        this.$refs[this.formName].resetFields();
        this.supplierList=[];
        delete this.supplier_info.id;
        this.buttList=[];
        this.oldButtList=[];
        this.oldData={};
        this.buttInfoList=[];
        this.financeList=[];
        this.contact_info={butt_man_id:"",butt_man_info:[],all_linkman:[]};
        this.tab=1;
        this.isLook=false;
        this.isSupplier5=0;
        this.supplier_prov="";
        this.supplier_city="";
        this.supplier_dist="";
      },
      //获取供应商名称数组
      getSupplierName(){
        getSupplier({}).then(res=>{
          // console.log(res)
          this.supplier_list=res;
        })
      },
      async fetchData() {
        this.listLoading = true;
        this.currentPage = 1;
        try {              
          let res = await getPage(this.formInline)
          let page=res.page;
          this.totalDataNumber = page * 20;
          if (page > 0) {
            let list = await getList(this.formInline)
            list.forEach(val=>{
              val.status=val.s_status==1?"停用":"在用";
            })
            this.list=list;
            this.listLoading = false;
          }else{
            this.list=[];
            this.listLoading = false;
          }           
        } catch (error) {
            this.listLoading = false;
        }

      },
      async handleCurrentChange(val) {
        this.listLoading = true;
        this.page=val;
        let list = await getList(this.formInline, val)
        list.forEach(val=>{
          val.status=val.s_status==1?"停用":"在用";
        })
        this.list=list;
        this.listLoading = false;
      },
    },
    computed:{
      "isSetButt":function(){
        return this.buttInfoList.length>0?true:false;
      }
    },
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .steps{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 20px;
    position: relative;
    .step_item{
      width: 100%;
      text-align: center;
    }
    .step_item.active{
      color: #409eff;
      font-weight: bold;
    }
    .step_line{
      width: 100%;
      height: 1px;
      background: #bbb;
    }
    .step_line.active{
      background: #409eff;
    }
  }
  .tabs{
    display: flex;
    margin-bottom: 10px;
    .tab_item{
      width: 130px;
      padding: 20px 0;
      text-align: center;
      font-size: 20px;
      background: #f5f5f5;
      cursor: pointer;
    }
    .tab_item~.tab_item{
      border-left: 1px solid #ddd;
    }
    .tab_item:hover,.tab_item.show{
      background: #409eff;
      color: #fff;
      font-weight: bold;
    }
  }
  .tab_title{
    padding:8px 5px;
    font-size:14px;
    background: #f5f5f5;
    margin-bottom: 20px;
    position: relative;
    .title_btn{
      position: absolute;
      top: 0px;
      right: 0px;
    }
  }
</style>